<template>
    <div class="container">
        <div class="bg-container"></div>
        <div class="login-container">
            <div class="left_c">
                <el-form label-position="right" label-width="80px" :model="formLogin">
                    <div style="text-align: center;font-size: 24px;margin-bottom: 20px;">欢 迎 登 录</div>
                    <el-form-item label="用户名">
                        <el-input v-model="formLogin.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="formLogin.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="loginFunc">登录</el-button>
                        <!-- <el-button type="text"><a href="/sign.html">注册</a></el-button> -->
                    </el-form-item>
                </el-form>
            </div>
            <div class="right_c">
                请联系网站管理员<br/>微信：ALonelyCowboy
            </div>
        </div>
    </div>
</template>
<script>
// import axios from "axios"

import { customEncrypt, secretKey } from "@/common/js/common";

export default {
    data() {
        return {
            formLogin: {
                username: '',
                password: '',
            }
        };
    },
    methods: {
        async loginFunc1() {
            let data = await this.axios({
                baseURL:'',   //  基础url地址，一般写 http协议 域名 端口
                url:'/api/user/login',   //  请求地址 ， 可以全写，也可以配合 baseURL 只写某个子页面的地址
                method:'post', // 请求方式  get是明文传参  post是密文传参
                timeout: 5000, // 请求超时  如果超时将停止请求
                data: {  // post 请求时 要传递的数据
                    username: this.formLogin.username,
                    password: customEncrypt(this.formLogin.password, secretKey)
                },
                // params:{ // get 请求时，要传递的数据
                //     id:'1'
                // }
            })
            console.log(data);

            if (data.data.success && data.data.data.user) {
                const token = data.data.data.token;
                localStorage.setItem('token', token);
                this.$store.commit('setUser', data.data.data.user);
                this.$router.push({ path: '/eeds' })
                this.$message({
                    // message: '恭喜你，登录成功！',
                    message: 'login success！',
                    type: 'success'
                });

            } else {
                this.$message.error('用户名密码错误！');
            }
        },
        loginFunc() {
            if (this.formLogin.username === 'admin' && this.formLogin.password === '123456') {
                this.$router.push({ path: '/qixiang' })
                // this.$router.push({ path: '/beidou_grid_code' })
                this.$message({
                    message: '恭喜你，登录成功！',
                    type: 'success'
                });

            } else {
                this.$message.error('用户名密码错误！');
            }
        }
    }
}
</script>
<style scoped>
.container {
    width: 100vw;
    height: 100vh;

    .bg-container {
        width: 100%;
        height: 100%;
        background-image: url('./img/login.jpg');
        /* background-image: url('./img/login-bg.svg'); */
        background-repeat: no-repeat;
        background-size: cover;
        float: left;
        background-position: center center;
    }

    .login-container {
        width: 800px;
        height: 350px;
        position: fixed;
        box-shadow: 0px 0px 20px 0px #00000090;
        margin: auto;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        /* display: flex;
        justify-content: center;
        align-items: center; */

        .left_c {
            width: 400px;
            height: 350px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
        }

        .right_c {
            width: 400px;
            height: 350px;
            background-color: #f2f2f200;
            align-items: center;
            font-size: 24px;
            color: #f5f5f5;
            text-align: center;
            padding-top: 45px;
            float: right;
        }
    }
}

/deep/ .el-form-item__label {
    color: #606266 !important;
}
</style>